<template>
	<view class="profile-page">
		<view class="or-header">
            <view class="back-btn" @click="goBack">
                <image :src="getFullImageUrl('@/static/index/Back.png')" style="width: 16rpx;height:28rpx;"></image>
            </view>
            <text>个人资料</text>
        </view>
		<!-- 第一部分：头像区域和自我描述以上的内容 -->
		<!-- 资料表单 -->
		<view class="form-section" style="margin-top: 215rpx;">
			<!-- 头像区域 -->
			<view class="avatar-section">
				<text class="avatar-label">上传头像</text>
				<view class="avatar-box" @click="openAvatarPopup">
					<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
					<view class="upload-mask" v-if="!avatarUrl">
						<uni-icons type="plusempty" size="16" color="#fff"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 自定义修改头像弹窗 -->
			<uni-popup ref="avatarPopup" type="bottom">
				<view class="custom-popup">
					<view class="popup-title">修改头像</view>
					<view class="popup-btn" @click="chooseImage('album')">打开相册</view>
					<view class="popup-btn" @click="chooseImage('camera')">使用相机</view>
					<view class="popup-cancel" @click="closeAvatarPopup">取消</view>
				</view>
			</uni-popup>

			<!-- 昵称 -->
			<view class="form-item">
				<view class="label">昵　　称</view>
				<view class="value" @click="openNicknamePopup">
					{{ nickname || '未填写' }}
					<uni-icons type="arrowright" size="15" color="#999"></uni-icons>
				</view>
			</view>

			<!-- 编辑昵称弹窗 -->
			<uni-popup ref="nicknamePopup" type="bottom">
				<view class="nickname-popup">
					<view class="popup-title">编辑昵称</view>
					<view class="input-wrap">
						<input class="nickname-input" v-model="inputNickname" placeholder="输入昵称" max-length="5"
							@input="handleInput" :style="{ color: inputNickname.length > 5 ? 'red' : '#333' }" />
						<view class="length-tip" :style="{ color: inputNickname.length > 5 ? 'red' : '#999' }">
							{{ inputNickname.length }}/5
						</view>
					</view>
					<view class="save-btn"
						:style="{ backgroundColor: inputNickname.length > 0 ? '#BEFF33' : '#D0D4D7', color: inputNickname.length > 0 ? '#0E1C37' : '#878B9A' }"
						@click="handleSave">
						保存
					</view>
					<view class="cancel-btn" @click="handleCancel">取消</view>
					<!-- 错误提示 -->
					<view class="error-tip" v-if="showError">
						<text>昵称长度超过最大限制字数</text>
					</view>
				</view>
			</uni-popup>

			<!-- 性别 -->
			<view class="form-item">
				<view class="label">性　　别</view>
				<view class="value" @click="openGenderPopup">
					{{ selectedGender || '未选择' }}
					<uni-icons type="arrowright" size="15" color="#999"></uni-icons>
				</view>
			</view>

			<!-- 性别弹框 -->
			<uni-popup ref="genderPopup" type="bottom">
				<view class="gender-popup">
					<view class="popup-title">设置性别</view>
					<view class="gender-options">
						<view class="gender-btn" @click="selectGender('男')">
							男
						</view>
						<view class="gender-btn" @click="selectGender('女')">
							女
						</view>
					</view>
					<view class="cancel-btn" @click="closeGenderPopup">取消</view>
				</view>
			</uni-popup>

			<!-- 年龄 -->
			<view class="form-item">
				<view class="label">年　　龄</view>
				<view class="value" v-if="!isEditingAge" @click="isEditingAge = true; tempAge = age">
					{{ age || '未填写' }}
					<uni-icons type="arrowright" size="15" color="#999"></uni-icons>
				</view>
				<view class="edit-input" v-else>
					<input type="number" v-model="tempAge" @blur="saveAge" @confirm="saveAge" >
					<uni-icons type="checkmark" size="18" color="#1890FF" @click="saveAge"></uni-icons>
				</view>
			</view>

			<!-- 身高 -->
			<view class="form-item">
				<view class="label">身　　高</view>
				<view class="value" v-if="!isEditingHeight" @click="isEditingHeight = true; tempHeight = height">
					{{ height ? height + 'cm' : '未填写' }}
					<uni-icons type="arrowright" size="15" color="#999"></uni-icons>
				</view>
				<view class="edit-input" v-else>
					<input type="number" v-model="tempHeight" @blur="saveHeight" @confirm="saveHeight"
						>
					<uni-icons type="checkmark" size="18" color="#1890FF" @click="saveHeight"></uni-icons>
				</view>
			</view>

			<!-- 自我描述 -->
			<view class="form-item">
				<view class="label">自我描述</view>
				<view class="value" @click="openSelfDescPopup">
					<view class="text-content">{{ displaySelfDesc || '未填写' }}</view>
					<uni-icons type="arrowright" size="15" color="#999"></uni-icons>
				</view>
			</view>

			<!-- 编辑自我描述弹窗 -->
			<uni-popup ref="selfDescPopup" type="bottom">
				<view class="self-desc-popup">
					<view class="popup-title">编辑自我描述</view>
					<textarea class="desc-textarea" v-model="selfDesc" placeholder="请填写个人相貌、性格爱好等。"
						@input="handleInput"></textarea>
					<view class="tip-text">自我描述介绍会影响到你的匹配，请认真填写！</view>
					<view class="save-btn"
						:style="{ backgroundColor: selfDesc.trim().length > 0 ? '#BEFF33' : '#D0D4D7', color: selfDesc.trim().length > 0 ? '#0E1C37' : '#888B9A' }"
						@click="handleSaveDesc">
						保存
					</view>
					<view class="cancel-btn" @click="handleCancelDesc">取消</view>
				</view>
			</uni-popup>
		</view>


		<!-- 第二部分：主工作职业到擅长菜系 -->
		<view class="section-two">
			<view class="form-section">
				<!-- 主工作职业 -->
				<view class="form-item">
					<view class="label">主工作职业</view>
					<view class="value" @click="openJobPopup">
						{{ job || '前往填写' }}
						<uni-icons type="arrowright" size="15" color="#999"></uni-icons>
					</view>
				</view>

				<!-- 编辑主工作职业弹窗 -->
				<uni-popup ref="jobPopup" type="bottom" @change="onJobPopupChange">
					<view class="nickname-popup">
						<view class="popup-title">主工作职业</view>
						<view class="input-wrap">
							<input class="nickname-input" v-model="jobValue" placeholder="请填写您的职业" />

						</view>
						<view class="save-btn"
							:style="{ backgroundColor: jobValue.length > 0 ? '#BEFF33' : '#D0D4D7', color: jobValue.length > 0 ? '#0E1C37' : '#878B9A' }"
							@click="saveJob">
							保存
						</view>
						<view class="cancel-btn" @click="closeJobPopup(job)">取消</view>
					</view>
				</uni-popup>



				<!-- 技能描述 -->
				<view class="form-item">
					<view class="label">技能描述</view>
					<view class="value" @click="openSkillPopup">
						<!-- 只显示selected为true的技能 -->
						<view class="selected-skill" v-for="(skill, index) in selectedSkills" :key="index">
							{{ skill.name }}
						</view>
						<!-- 当没有选中技能时显示提示 -->
						<view v-if="selectedSkills.length === 0" class="no-skill-tip">
							前往填写
						</view>
						<uni-icons type="arrowright" size="15" color="#999"></uni-icons>
					</view>
				</view>

				<!-- 编辑技能弹窗 -->
				<uni-popup ref="skillPopup" type="bottom" @change="onPopupChange">
					<view class="popup skill-popup">
						<view class="popup-header">
							<text class="popup-title">编辑技能描述</text>
							<view v-if="!isEditing" class="edit-delete-btn" @click="isEditing = true">
								<text>编辑删除</text>
							</view>
							<view v-else class="cancel-delete-btn" @click="isEditing = false">
								<text>取消删除</text>
							</view>
						</view>
						<!-- 弹窗中显示所有技能，并根据selected状态显示勾选 -->
						<view class="skill-tags">
							<view class="tag" v-for="(skill, index) in skills" :key="index"
								:class="{ 'selected': skill.selected }" @click="toggleSelect(index)">
								{{ skill.name }}
								<uni-icons type="trash" size="18" v-if="isEditing" class="tag-close"
									:color="skill.selected ? '#FFFFFF' : '#888B9A'"
									@click.stop="removeSkill(index)"></uni-icons>
							</view>
							<view class="add-tag" v-if="skills.length < maxSkills" @click="openEditSkill">
								点击添加
								<uni-icons type="plus" size="15" color="#888B9A"></uni-icons>
							</view>
						</view>
						<view class="tag-count">
							{{skills.filter(s => s.selected).length}}/{{ maxSelected }}
						</view>
						<view class="add-tip">
							添加自己具备的技能
						</view>
						<view class="popup-buttons">
							<button class="save-btn" :disabled="skills.filter(s => s.selected).length === 0"
								@click="saveSkills">
								保存
							</button>
						</view>
					</view>
				</uni-popup>

				<!-- 编辑技能弹窗 -->
				<uni-popup ref="editSkillPopup" type="center" @change="onPopupChange">
					<view class="edit-skill-popup">
						<view class="popup-header">
							<text class="popup-title">编辑技能</text>
							<text class="cancel-edit" @click="closeEditSkill">取消编辑</text>
						</view>
						<input class="popup-input" placeholder="输入编辑内容" v-model="editSkillValue"
							:style="{ color: editSkillValue.length > 0 ? '#0E1C37' : '#A2A6B7' }" />
						<view class="popup-buttons">
							<button class="confirm-btn" :disabled="!editSkillValue" @click="confirmEditSkill"
								:style="{ backgroundColor: editSkillValue.length > 0 ? '#BEFF33' : '#D0D4D7', color: editSkillValue.length > 0 ? '#0E1C37' : '#878B9A' }">
								确认
							</button>
						</view>
					</view>
				</uni-popup>


				<!-- 可兼职时间 -->
				<view class="form-item">
					<view class="label">可兼职时间</view>
					<view class="value" @click="openEditPopup">
						{{ time || '前往选择' }}
						<uni-icons type="arrowright" size="15" color="#999"></uni-icons>
					</view>
				</view>

				<!-- 底部弹出的编辑可兼职时间弹窗 -->
				<uni-popup ref="editPopup" type="bottom" @change="onPopupChange">
					<view class="edit-popup">
						<text class="section-title">编辑可兼职时间</text>
						<view class="time-item" v-for="(timeItem, index) in timeList" :key="index">
							<text class="time-text">{{ timeItem }}</text>
							<view>
								<view class="edit-btn" @click="openEditTime(index)">
									编辑
								</view>
							</view>
						</view>
						<view class="add-btn" @click="openAddTime">
							点击添加
							<uni-icons type="plus" size="18" style="color: #888B9A;margin-left: 10rpx;" color="#888B9A"></uni-icons>
						</view>
						<button class="save-btn" :disabled="hasDefaultTime" @click="saveChanges"
							:style="{ backgroundColor: !hasDefaultTime ? '#BEFF33' : '#D0D4D7', color: !hasDefaultTime ? '#0E1C37' : '#878B9A' }">保存</button>
						<view class="cancel-btn" @click="cancelEdit">取消</view>
					</view>
				</uni-popup>

				<!-- 选择时间弹窗 -->
				<uni-popup ref="timePopup" type="center" @change="onPopupChange">
					<view class="time-popup">
						<view class="popup-header">
							<text class="popup-title">选择时间</text>
							<text class="cancel-edit" @click="closeTimePopup">取消编辑</text>
						</view>
						<view class="modal-body">
							<text class="body-title">选择工作日</text>
							<view class="weekdays">
								<view v-for="(day, idx) in weekdays" :key="idx"
									:class="['weekday-btn', selectedWeekdays.includes(day) ? 'selected' : '', idx === 3 ? 'no-right-margin' : '']"
									@click="toggleWeekday(day)">
									{{ day }}
							</view>
							</view>
							<text class="body-title">选择时间</text>
							<view class="time-select-container">
								<picker mode="time" :value="startTimeValue" :start="startTime" :end="endTime"
									@change="onStartTimeChange">
									<view class="picker-item">
										{{ startTimeValue || '00:00' }}
									</view>
								</picker>
								<view class="time-separator">-</view>
								<picker mode="time" :value="endTimeValue" :start="startTimeValue || startTime"
									:end="endTime" @change="onEndTimeChange">
									<view class="picker-item">
										{{ endTimeValue || '00:00' }}
									</view>
								</picker>
							</view>
						</view>
						<view class="popup-buttons">
							<button class="confirm-btn" :disabled="!isConfirmEnabled" @click="confirmTime"
								:style="{ backgroundColor: isConfirmEnabled ? '#BEFF33' : '#D0D4D7', color: isConfirmEnabled ? '#0E1C37' : '#878B9A' }">
								确认
							</button>
						</view>
					</view>
				</uni-popup>

				<!-- 可接受区域 -->
				<view class="form-item">
					<view class="label">可接受区域</view>
					<view class="value" @click="openAreaPopup">
						{{ acceptArea.address || '前往填写' }}
						<uni-icons type="arrowright" size="15" color="#999"></uni-icons>
					</view>
				</view>

				<!-- 底部弹出的可接受区域弹窗 -->
				<uni-popup ref="areaPopup" type="bottom" @change="onPopupChange">
					<view class="area-popup">
						<text class="section-title">编辑可接受区域</text>

						<!-- 地址输入框 -->
						<input class="address-input" v-model="acceptArea.address"
							:placeholder="acceptArea.address ? '' : '正在获取位置...'" />

						<!-- 地图选择区域 -->
						<view class="map-container" @click="navigateToLocationSelect">
							<image class="map-image" :src="getFullImageUrl('@/static/release/map.png')" mode="widthFix">
							</image>
							<view class="map-overlay">
								<uni-icons type="location-filled" size="18"></uni-icons>
								<text class="map-text">点击选择地点位置</text>
							</view>
						</view>

						<!-- 范围选择下拉框 -->
						<view class="range-selector">
							<picker v-model="acceptArea.rangeIndex" @change="onRangeChange" :range="rangeOptions">
								<view class="picker-text">
									<text>{{ rangeOptions[acceptArea.rangeIndex] }}</text>

									<uni-icons type="down" size="12" color="#888"></uni-icons>
								</view>
							</picker>
						</view>

						<!-- 操作按钮 -->
						<view class="btn-group">

							<button class="save-btn" :disabled="!isSaveAreaEnabled"
								:class="{ 'active': isSaveAreaEnabled }" @click="saveAreaChanges">
								保存
							</button>
							<button class="cancel-btn" @click="closeAreaPopup">取消</button>
						</view>
					</view>
				</uni-popup>


				<!-- 擅长菜系 -->
				<view class="form-item">
					<view class="label">擅长菜系</view>
					<view class="value" @click="openCuisinePopup">
						<view class="text-content">{{ cuisineDesc || '输入您擅长的菜系、拿手菜等' }}</view>
						<uni-icons type="arrowright" size="15" color="#999"></uni-icons>
					</view>
				</view>

				<!-- 擅长菜系弹窗 -->
				<uni-popup ref="cuisinePopup" type="bottom">
					<view class="cuisine-popup">
						<view class="popup-title">编辑擅长菜系</view>
						<textarea class="desc-textarea" v-model="cuisineDesc" placeholder="输入您擅长的菜系、拿手菜等。"
							@input="handleCuisineInput"></textarea>
						<view class="tip-text">编辑擅长菜系会影响到你的匹配，请认真填写！</view>
						<view class="save-btn" :style="{
							backgroundColor: cuisineDesc.trim().length > 0 ? '#BEFF33' : '#D0D4D7',
							color: cuisineDesc.trim().length > 0 ? '#0E1C37' : '#888B9A'
						}" @click="handleCuisineSave">
							保存
						</view>
						<view class="cancel-btn" @click="handleCuisineCancel">取消</view>
					</view>
				</uni-popup>
			</view>
		</view>


		<!-- 第三部分：实名认证到支付宝绑定 -->
		<view class="section-three" style="padding-bottom: 10rpx;">
			<view class="form-section">
				<!-- 实名认证 -->
				<view class="form-item auth-item">
					<view class="label">实名认证</view>
					<view class="value" @click="onAuth">
						{{ authStatus ? '已认证' : '立即前往' }}
						<uni-icons v-if="!authStatus" type="arrowright" size="15" color="#1890FF"></uni-icons>
					</view>
				</view>

				<!-- 微信绑定 -->
				<!-- <view class="form-item bind-item">
					<view class="label">微信绑定</view>
					<view class="value" @click="onBindWechat">
						{{ wechatBound ? '已绑定' : '立即绑定' }}
						<uni-icons v-if="!wechatBound" type="arrowright" size="15" color="#1890FF"></uni-icons>
					</view>
				</view> -->

				<!-- 支付宝绑定 -->
				<!-- <view class="form-item bind-item">
					<view class="label">支付宝绑定</view>
					<view class="value" @click="onBindAlipay">
						{{ alipayBound ? '已绑定' : '立即绑定' }}
						<uni-icons v-if="!alipayBound" type="arrowright" size="15" color="#1890FF"></uni-icons>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script src="./personalData.js">
</script>

<style lang="scss" src="./personalData.scss"></style>